// 页面加载完成后初始化
document.addEventListener('DOMContentLoaded', function() {
    initializeAnimations();
    initializePayment();
    initializeScrollEffects();
    initializeInteractions();
});

// 初始化动画效果
function initializeAnimations() {
    // 添加页面加载动画
    const heroSection = document.querySelector('.hero-section');
    const coreTraitsSection = document.querySelector('.core-traits-section');
    
    // 英雄区域淡入动画
    setTimeout(() => {
        heroSection.style.opacity = '1';
        heroSection.style.transform = 'translateY(0)';
    }, 100);
    
    // 观察器用于滚动动画
    const observerOptions = {
        threshold: 0.1,
        rootMargin: '0px 0px -50px 0px'
    };
    
    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.classList.add('animate-in');
            }
        });
    }, observerOptions);
    
    // 观察需要动画的元素
    const animateElements = document.querySelectorAll('.analysis-card, .content-item, .payment-card');
    animateElements.forEach(el => {
        el.style.opacity = '0';
        el.style.transform = 'translateY(30px)';
        el.style.transition = 'all 0.6s ease';
        observer.observe(el);
    });
}

// 初始化支付功能
function initializePayment() {
    const payButton = document.getElementById('payButton');
    let isProcessing = false;
    
    payButton.addEventListener('click', function() {
        if (isProcessing) return;
        
        // 开始支付流程
        startPaymentProcess();
    });
}

// 支付流程处理
function startPaymentProcess() {
    const payButton = document.getElementById('payButton');
    const originalText = payButton.innerHTML;
    
    // 更新按钮状态
    payButton.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 处理中...';
    payButton.disabled = true;
    payButton.style.opacity = '0.7';
    
    // 显示支付模态框
    showPaymentModal();
}

// 显示支付模态框
function showPaymentModal() {
    // 创建模态框HTML
    const modalHTML = `
        <div id="paymentModal" class="payment-modal">
            <div class="modal-overlay"></div>
            <div class="modal-content">
                <div class="modal-header">
                    <h3>选择支付方式</h3>
                    <button class="close-modal" onclick="closePaymentModal()">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="payment-methods">
                        <div class="payment-method" onclick="selectPaymentMethod('wechat')">
                            <div class="method-icon">
                                <i class="fab fa-weixin" style="color: #07c160;"></i>
                            </div>
                            <div class="method-info">
                                <h4>微信支付</h4>
                                <p>安全便捷的移动支付</p>
                            </div>
                            <div class="method-price">¥199</div>
                        </div>
                        <div class="payment-method" onclick="selectPaymentMethod('alipay')">
                            <div class="method-icon">
                                <i class="fab fa-alipay" style="color: #1677ff;"></i>
                            </div>
                            <div class="method-info">
                                <h4>支付宝</h4>
                                <p>快速安全的在线支付</p>
                            </div>
                            <div class="method-price">¥199</div>
                        </div>
                    </div>
                    <div class="payment-guarantee">
                        <div class="guarantee-item">
                            <i class="fas fa-shield-alt"></i>
                            <span>安全加密传输</span>
                        </div>
                        <div class="guarantee-item">
                            <i class="fas fa-undo"></i>
                            <span>7天无理由退款</span>
                        </div>
                        <div class="guarantee-item">
                            <i class="fas fa-clock"></i>
                            <span>即时开通服务</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    `;
    
    // 添加模态框到页面
    document.body.insertAdjacentHTML('beforeend', modalHTML);
    
    // 添加模态框样式
    addModalStyles();
    
    // 显示动画
    setTimeout(() => {
        const modal = document.getElementById('paymentModal');
        modal.classList.add('show');
    }, 10);
}

// 选择支付方式
function selectPaymentMethod(method) {
    const methodName = method === 'wechat' ? '微信支付' : '支付宝';
    
    // 显示支付确认
    showPaymentConfirmation(method, methodName);
}

// 显示支付确认
function showPaymentConfirmation(method, methodName) {
    const modalBody = document.querySelector('.modal-body');
    
    modalBody.innerHTML = `
        <div class="payment-confirmation">
            <div class="confirmation-icon">
                <i class="fas fa-credit-card"></i>
            </div>
            <h3>确认支付</h3>
            <p>支付方式：${methodName}</p>
            <p>支付金额：<strong>¥199</strong></p>
            <div class="confirmation-buttons">
                <button class="confirm-pay-btn" onclick="processPayment('${method}')">
                    <i class="fas fa-lock"></i>
                    确认支付
                </button>
                <button class="cancel-btn" onclick="closePaymentModal()">取消</button>
            </div>
        </div>
    `;
}

// 处理支付
function processPayment(method) {
    const confirmBtn = document.querySelector('.confirm-pay-btn');
    confirmBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 支付中...';
    confirmBtn.disabled = true;
    
    // 模拟支付处理时间
    setTimeout(() => {
        // 支付成功
        showPaymentSuccess();
        
        // 3秒后解锁内容
        setTimeout(() => {
            unlockPremiumContent();
            closePaymentModal();
        }, 3000);
    }, 2000);
}

// 显示支付成功
function showPaymentSuccess() {
    const modalBody = document.querySelector('.modal-body');
    
    modalBody.innerHTML = `
        <div class="payment-success">
            <div class="success-icon">
                <i class="fas fa-check-circle"></i>
            </div>
            <h3>支付成功！</h3>
            <p>感谢您的购买，正在为您解锁完整报告...</p>
            <div class="success-animation">
                <div class="loading-bar">
                    <div class="loading-progress"></div>
                </div>
            </div>
        </div>
    `;
}

// 解锁付费内容
function unlockPremiumContent() {
    // 移除所有付费内容的模糊效果和遮罩
    const premiumContents = document.querySelectorAll('.premium-content');
    
    premiumContents.forEach(content => {
        const blurredContent = content.querySelector('.card-content.blurred');
        const overlay = content.querySelector('.premium-overlay');
        const badge = content.querySelector('.premium-badge');
        
        if (blurredContent) {
            blurredContent.classList.remove('blurred');
            blurredContent.style.filter = 'none';
            blurredContent.style.pointerEvents = 'auto';
            blurredContent.style.userSelect = 'auto';
        }
        
        if (overlay) {
            overlay.style.opacity = '0';
            setTimeout(() => {
                overlay.remove();
            }, 500);
        }
        
        if (badge) {
            badge.textContent = '已解锁';
            badge.style.background = '#28a745';
            badge.style.color = 'white';
        }
    });
    
    // 添加完整内容
    addFullContent();
    
    // 更新支付按钮
    const payButton = document.getElementById('payButton');
    payButton.innerHTML = '<i class="fas fa-check"></i> 已解锁完整报告';
    payButton.style.background = '#28a745';
    payButton.disabled = true;
    
    // 显示成功提示
    showUnlockNotification();
}

// 添加完整内容
function addFullContent() {
    // 这里可以添加更多的完整报告内容
    const premiumSection = document.querySelector('.premium-preview-section .container');
    
    // 添加更多分析内容
    const additionalContent = `
        <div class="analysis-card unlocked-content" style="margin-top: 30px;">
            <div class="card-header">
                <h3>🎓 完整成长指南</h3>
                <span class="free-badge" style="background: #28a745;">已解锁</span>
            </div>
            <div class="card-content">
                <div class="analysis-point">
                    <h4>养育要点 (1-6岁)：</h4>
                    <div class="growth-guide">
                        <div class="guide-section">
                            <h5>1. 沟通：诉诸"公平、美感、伙伴关系"</h5>
                            <ul>
                                <li>多用"我们"：将指令变成合作邀请</li>
                                <li>解释"美学理由"：把画笔放好，画板干干净净的，多漂亮呀！</li>
                                <li>给予"外交官"角色：引导他成为小外交官</li>
                            </ul>
                        </div>
                        <div class="guide-section">
                            <h5>2. 激励：提供"舞台"与"合作"</h5>
                            <ul>
                                <li>创造表现机会：鼓励在家人面前表演</li>
                                <li>强调团队胜利：多玩合作类游戏</li>
                                <li>艺术熏陶是"刚需"：音乐、绘画、舞蹈等</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    `;
    
    premiumSection.insertAdjacentHTML('beforeend', additionalContent);
}

// 显示解锁通知
function showUnlockNotification() {
    const notification = document.createElement('div');
    notification.className = 'unlock-notification';
    notification.innerHTML = `
        <div class="notification-content">
            <i class="fas fa-unlock"></i>
            <span>完整报告已解锁！</span>
        </div>
    `;
    
    document.body.appendChild(notification);
    
    setTimeout(() => {
        notification.classList.add('show');
    }, 100);
    
    setTimeout(() => {
        notification.classList.remove('show');
        setTimeout(() => {
            notification.remove();
        }, 300);
    }, 3000);
}

// 关闭支付模态框
function closePaymentModal() {
    const modal = document.getElementById('paymentModal');
    if (modal) {
        modal.classList.remove('show');
        setTimeout(() => {
            modal.remove();
        }, 300);
    }
    
    // 重置支付按钮
    const payButton = document.getElementById('payButton');
    payButton.innerHTML = '<i class="fas fa-unlock"></i> 立即解锁完整报告';
    payButton.disabled = false;
    payButton.style.opacity = '1';
}

// 初始化滚动效果
function initializeScrollEffects() {
    // 平滑滚动到付费区域
    const premiumContents = document.querySelectorAll('.premium-content');
    
    premiumContents.forEach(content => {
        content.addEventListener('click', () => {
            const paymentSection = document.querySelector('.payment-section');
            paymentSection.scrollIntoView({ 
                behavior: 'smooth',
                block: 'center'
            });
            
            // 高亮支付按钮
            const payButton = document.getElementById('payButton');
            payButton.style.animation = 'pulse 1s ease-in-out 3';
        });
    });
}

// 初始化其他交互
function initializeInteractions() {
    // 添加CSS动画类
    const style = document.createElement('style');
    style.textContent = `
        .animate-in {
            opacity: 1 !important;
            transform: translateY(0) !important;
        }
        
        @keyframes pulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.05); }
        }
    `;
    document.head.appendChild(style);
}

// 添加模态框样式
function addModalStyles() {
    const style = document.createElement('style');
    style.textContent = `
        .payment-modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1000;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease;
        }
        
        .payment-modal.show {
            opacity: 1;
            visibility: visible;
        }
        
        .modal-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.5);
            backdrop-filter: blur(5px);
        }
        
        .modal-content {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: white;
            border-radius: 20px;
            width: 90%;
            max-width: 500px;
            max-height: 90vh;
            overflow-y: auto;
        }
        
        .modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 30px 30px 0;
            border-bottom: 1px solid #eee;
            margin-bottom: 30px;
        }
        
        .modal-header h3 {
            margin: 0;
            color: #333;
        }
        
        .close-modal {
            background: none;
            border: none;
            font-size: 1.5rem;
            color: #999;
            cursor: pointer;
            padding: 10px;
        }
        
        .modal-body {
            padding: 0 30px 30px;
        }
        
        .payment-method {
            display: flex;
            align-items: center;
            padding: 20px;
            border: 2px solid #eee;
            border-radius: 15px;
            margin-bottom: 15px;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .payment-method:hover {
            border-color: #667eea;
            background: #f8f9ff;
        }
        
        .method-icon {
            font-size: 2rem;
            margin-right: 20px;
        }
        
        .method-info {
            flex: 1;
        }
        
        .method-info h4 {
            margin: 0 0 5px 0;
            color: #333;
        }
        
        .method-info p {
            margin: 0;
            color: #666;
            font-size: 0.9rem;
        }
        
        .method-price {
            font-size: 1.2rem;
            font-weight: 600;
            color: #667eea;
        }
        
        .payment-guarantee {
            display: flex;
            justify-content: space-around;
            margin-top: 30px;
            padding-top: 20px;
            border-top: 1px solid #eee;
        }
        
        .guarantee-item {
            text-align: center;
            color: #666;
            font-size: 0.9rem;
        }
        
        .guarantee-item i {
            display: block;
            font-size: 1.5rem;
            color: #28a745;
            margin-bottom: 8px;
        }
        
        .payment-confirmation,
        .payment-success {
            text-align: center;
            padding: 40px 20px;
        }
        
        .confirmation-icon,
        .success-icon {
            font-size: 4rem;
            color: #667eea;
            margin-bottom: 20px;
        }
        
        .success-icon {
            color: #28a745;
        }
        
        .confirmation-buttons {
            margin-top: 30px;
        }
        
        .confirm-pay-btn {
            background: #667eea;
            color: white;
            border: none;
            padding: 15px 30px;
            border-radius: 25px;
            font-size: 1.1rem;
            cursor: pointer;
            margin-right: 15px;
        }
        
        .cancel-btn {
            background: #6c757d;
            color: white;
            border: none;
            padding: 15px 30px;
            border-radius: 25px;
            font-size: 1.1rem;
            cursor: pointer;
        }
        
        .loading-bar {
            width: 100%;
            height: 6px;
            background: #eee;
            border-radius: 3px;
            overflow: hidden;
            margin-top: 20px;
        }
        
        .loading-progress {
            width: 0;
            height: 100%;
            background: #28a745;
            border-radius: 3px;
            animation: loading 3s ease-in-out forwards;
        }
        
        @keyframes loading {
            to { width: 100%; }
        }
        
        .unlock-notification {
            position: fixed;
            top: 20px;
            right: 20px;
            background: #28a745;
            color: white;
            padding: 15px 25px;
            border-radius: 10px;
            box-shadow: 0 10px 30px rgba(40,167,69,0.3);
            z-index: 1001;
            transform: translateX(100%);
            transition: transform 0.3s ease;
        }
        
        .unlock-notification.show {
            transform: translateX(0);
        }
        
        .notification-content {
            display: flex;
            align-items: center;
        }
        
        .notification-content i {
            margin-right: 10px;
            font-size: 1.2rem;
        }
        
        .guide-section {
            margin-bottom: 25px;
        }
        
        .guide-section h5 {
            color: #667eea;
            margin-bottom: 15px;
            font-size: 1.1rem;
        }
        
        .guide-section ul {
            list-style: none;
            padding-left: 0;
        }
        
        .guide-section li {
            padding: 8px 0;
            padding-left: 25px;
            position: relative;
            color: #555;
            line-height: 1.6;
        }
        
        .guide-section li::before {
            content: "✓";
            position: absolute;
            left: 0;
            color: #28a745;
            font-weight: bold;
        }
    `;
    document.head.appendChild(style);
}

// 全局函数，供HTML调用
window.closePaymentModal = closePaymentModal;
window.selectPaymentMethod = selectPaymentMethod;
window.processPayment = processPayment;
